<template>
  <div
    :id="id"
    :class="className"
    :foldXData="foldXData"
    :foldYData="foldYData"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    foldXData: {
      type: Array
    },
    foldYData: {
      type: Array
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        xAxis: {
          type: 'category',
          data: this.foldXData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.foldYData,
            type: 'line',
            label: {
              show: true,
              position: 'top',
              color: 'black',
              textStyle: {
                fontSize: 16
              }
            },
            lineStyle: {
              normal: {
                color: 'grey',
                width: 1
                // type: 'dashed'
              }
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationEasingUpdate: 'elasticOut',
        animationDelay(idx) {
          return idx * 20;
        },
        animationDelayUpdate(idx) {
          return idx * 20;
        }
      });
    }
  },
  watch: {
    foldXData: {
      deep: true,
      handler() {
        this.$forceUpdate();
        this.initChart();
      }
    },
    foldYData: {
      deep: true,
      handler() {
        this.$forceUpdate();
        this.initChart();
      }
    }
  }
};
</script>
